<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>淘宝</title>
    <style>
    body,*{
        margin: 0;
        padding: 0;
        background: rgb(255, 255, 255)
    }    
     .box{
        width: 100%
    }
    ul{
        width: 630px;
        background:rgb(250, 250, 250);
        padding: 5px;
        float:left;
        margin: 5px;
    }
    .box1{
        width: 200px;
        height: 300px;
        background:rgb(255, 255, 255);
        list-style: none;
        float:left;
        margin: 5px;
    }
    .box2{
        width: 620px;
        height: 25px;
        float:left;
        list-style: none;
        margin: 5px;
        color: rgb(180, 180, 180);
        background:rgb(250, 250, 250);
    }
    .ppap{
        float: right;
        background:rgb(250, 250, 250);
    }
    .clearfix{
        clear: both;
    }
    .p1{
        color: rgb(180, 180, 180)
    }
    .p2{
        color:rgb(76, 168, 248)
        i
    }
    </style>
</head>
<body>
    <div class="box">   
        <ul>
            <li class="box2"><span style="color:rgb(67, 67, 218)"><b>有好货</b></span><sapn class="ppap">换一换</sapn></li>
            <li class="box1"><img src="images/you1.jpg" width="200px"><p>max破产都要买的</p><p class="p1">《破产姐妹》max最</p><br><p class="p2">🙂 5943人说好</p></li>
            <li class="box1"><img src="images/you2.jpg" width="200px"><p>MissCandy指甲油</p><p class="p1">这款指甲油是3D效果</p><br><p class="p2">🙂 73295人说好</p></li>
            <li class="box1"><img src="images/you3.jpg" width="200px"><p>限量军绿色PUMA</p><p class="p1">限量的军绿色，帅气</p><br><p class="p2">🙂 64276人说好</p</li>
            <li class="box1"><img src="images/you4.jpg" width="200px" height="200px"><p>Nike Air Mag回到未</p><p class="p1">还记得儿时我们都很</p><br><p class="p2">🙂 48455人说好</p</li>
            <li class="box1"><img src="images/you5.jpg" width="200px"><p>天王表 天猫联名款</p><p class="p1">金色猫眼时间刻度搭</p><br><p class="p2">🙂 7人说好</p</li>
            <li class="box1"><img src="images/you6.jpg" width="200px"><p>【超级难买】NARS</p><p class="p1">堪称年度口红界的巨</p><br><p class="p2">🙂 42697人说好</p</li>

            <div class="clearfix"></div>
        </ul>
    </div>
    <div class="box">
        <ul>
            <li class="box2"><span style="color:crimson"><b>爱逛街</b></span><sapn class="ppap">更多></sapn></li>
            <li class="box1"><img src="images/ai1.jpg" width="200px"><p class="p1">“冷冻火龙果新鲜红心火龙速冻果块果肉</p><br><p class="p1">放飞自我的兔小姐</p></li>
            <li class="box1"><img src="images/ai2.jpg" width="200px"><p class="p1">“RHYTHM丽声钟座表欧式现代田园客厅</p><br><p class="p1">潮范时光机</p></li>
            <li class="box1"><img src="images/ai3.jpg" width="200px"><p class="p1">“Intel/英特尔 酷睿 I7 8700K 盒装 搭 微</p><br><p class="p1">潮流女孩girl</p</li>
            <li class="box1"><img src="images/ai4.jpg" width="200px" height="200px"><p class="p1">“3MM日韩仿鹿皮绳双面绒编制手链项链</p><br><p class="p1">潮流女孩girl</p</li>
            <li class="box1"><img src="images/ai5.jpg" width="200px"><p class="p1">“汽车座椅腰靠护腰记忆棉车靠背垫车用</p><br><p class="p1">潮流女孩girl</p</li>
            <li class="box1"><img src="images/ai6.jpg" width="200px"><p class="p1">“荷鲁斯橡皮艇 加厚钓渔船2/3/4/5/6人充</p><br><p class="p1">潮流女孩girl</p</li>

            <div class="clearfix"></div>
        </ul>
    </div>
</body>
</html>